<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>异步加载地图</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <link href="http://mapopen.cdn.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.css"
          rel="stylesheet">
    <style>
        body,
        html,
        #container {
            overflow: hidden;
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "微软雅黑", serif;
        }

        ul li {
            list-style: none;
        }

        .drawing-panel {
            z-index: 999;
            position: fixed;
            top: 0;
            margin-left: 79%;
            padding-left: 0;
            border-radius: 0.25rem;
            height: 40px;
            box-shadow: 0 2px 10px 0 rgba(27, 142, 236, 0.5);
        }

        .bmap-btn {
            border-right: 1px solid #ECCEF7;
            float: left;
            width: 50px;
            height: 100%;
            background-image: url(http://api.map.baidu.com/library/DrawingManager/1.4/src/bg_drawing_tool.png);
            cursor: pointer;
        }

        ul li:last-child {
            border-right: none;
            border-radius: 0 0.25rem 0.25rem 0;
        }

        ul li:first-child {
            border-radius: 0.25rem 0 0 0.25rem;
        }

        .drawing-panel .bmap-hand {
            background-position: -5px -2px;
        }

        .drawing-panel .bmap-marker {
            background-position: -69px -2px;
        }

        .drawing-panel .bmap-polyline {
            background-position: -199px -2px;
        }

        .drawing-panel .bmap-rectangle {
            background-position: -332px -2px;
        }

        .drawing-panel .bmap-polygon {
            background-position: -267px -2px;
        }

        .drawing-panel .bmap-circle {
            background-position: -137px -2px;
        }
    </style>
</head>
<body>
<ul class="drawing-panel">
    <li class="bmap-btn bmap-hand" id="hand" onclick="draw(this)"></li>
    <li class="bmap-btn bmap-marker" id="marker" onclick="draw(this)"></li>
    <li class="bmap-btn bmap-polyline" id="polyline" onclick="draw(this)"></li>
    <li class="bmap-btn bmap-rectangle" id="rectangle" onclick="draw(this)"></li>
    <li class="bmap-btn bmap-polygon" id="polygon" onclick="draw(this)"></li>
    <li class="bmap-btn bmap-circle" id="circle" onclick="draw(this)"></li>
</ul>
<div id="container"></div>
</body>
</html>
<script type="text/javascript"
        src="http://api.map.baidu.com/api?type=webgl&v=1.0&ak=6zLu4HrkmkQO52ojX0qXNZKqdOCpFX55"></script>
<script type="text/javascript"
        src="http://mapopen.cdn.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.js"></script>
<script type="text/javascript"
        src="http://mapopen.cdn.bcebos.com/github/BMapGLLib/DistanceTool/src/DistanceTool.min.js"></script>
<script>
    var map = new BMapGL.Map('container'); // 创建Map实例
    var point = new BMapGL.Point(116.404, 39.915); // 创建点坐标
    map.centerAndZoom(point, 19);
    map.enableScrollWheelZoom(); // 启用滚轮放大缩小
    map.setHeading(64.5);
    map.setTilt(73);
    map.setDisplayOptions({
        skyColors: ['rgba(186, 0, 255, 0)', 'rgba(186, 0, 255, 0.2)']
    })
    map.addControl(new BMapGL.ScaleControl());
    map.addControl(new BMapGL.ZoomControl());
    map.addControl(new BMapGL.NavigationControl3D());

    // 创建城市选择控件
    var cityControl = new BMapGL.CityListControl({
        // 控件的停靠位置（可选，默认左上角）
        anchor: BMAP_ANCHOR_TOP_LEFT,
        // 控件基于停靠位置的偏移量（可选）
        offset: new BMapGL.Size(10, 5)
    });
    // 将控件添加到地图上
    map.addControl(cityControl);

    /*测距*/
    var myDis = new BMapGLLib.DistanceTool(map);

    var menu = new BMapGL.ContextMenu();
    var txtMenuItem = [{
        text: '清空标记',
        callback: function () {
            map.clearOverlays();
        }
    }, {
        text: '开始测距',
        callback: function () {
            myDis.open();
        }
    }];
    for (var i = 0; i < txtMenuItem.length; i++) {
        menu.addItem(new BMapGL.MenuItem(txtMenuItem[i].text, txtMenuItem[i].callback, 100));
    }
    map.addContextMenu(menu);

    var styleOptions = {
        strokeColor: "red",    //边线颜色。
        fillColor: "red",      //填充颜色。当参数为空时，圆形将没有填充效果。
        strokeWeight: 3,       //边线的宽度，以像素为单位。
        strokeOpacity: 0.8,	   //边线透明度，取值范围0 - 1。
        fillOpacity: 0.6,      //填充的透明度，取值范围0 - 1。
        strokeStyle: 'solid' //边线的样式，solid或dashed。
    }
    var labelOptions = {
        borderRadius: '2px',
        background: '#FFFBCC',
        border: '1px solid #E1E1E1',
        color: '#703A04',
        fontSize: '12px',
        letterSpacing: '0',
        padding: '5px'
    };
    // 实例化鼠标绘制工具
    var drawingManager = new BMapGLLib.DrawingManager(map, {
        // isOpen: true,        // 是否开启绘制模式
        enableCalculate: false, // 绘制是否进行测距测面
        enableSorption: true,   // 是否开启边界吸附功能
        sorptiondistance: 20,   // 边界吸附距离
        circleOptions: styleOptions,     // 圆的样式
        polylineOptions: styleOptions,   // 线的样式
        polygonOptions: styleOptions,    // 多边形的样式
        rectangleOptions: styleOptions,  // 矩形的样式
        labelOptions: labelOptions,      // label样式
    });

    function draw(e) {
        var arr = document.getElementsByClassName('bmap-btn');
        for (var i = 0; i < arr.length; i++) {
            arr[i].style.backgroundPositionY = '-2px';
        }
        e.style.backgroundPositionY = '-52px';
        switch (e.id) {
            case 'marker': {
                var drawingType = BMAP_DRAWING_MARKER;
                break;
            }
            case 'polyline': {
                var drawingType = BMAP_DRAWING_POLYLINE;
                break;
            }
            case 'rectangle': {
                var drawingType = BMAP_DRAWING_RECTANGLE;
                break;
            }
            case 'polygon': {
                var drawingType = BMAP_DRAWING_POLYGON;
                break;
            }
            case 'circle': {
                var drawingType = BMAP_DRAWING_CIRCLE;
                break;
            }
            case 'hand': {
                drawingManager.close();
                return;
            }
        }
        // 进行绘制
        if (drawingManager._isOpen && drawingManager.getDrawingMode() === drawingType) {
            drawingManager.close();
        } else {
            drawingManager.setDrawingMode(drawingType);
            drawingManager.open();
            // 创建信息窗口
            var opts = {
                width: 200,
                height: 100,
                title: '故宫博物院'
            };
            var infoWindow = new BMapGL.InfoWindow('地址：北京市东城区王府井大街88号乐天银泰百货八层', opts);
            for (var i = 0; i < map.getOverlays().length; i++) {
                   map.getOverlays()[i].removeEventListener('click')
                   map.getOverlays()[i].addEventListener('click', function () {
                      alert("aa"); // 开启信息窗口
                   });
            }
        }
    }
</script>